<template>
  <div v-if="model" class="editViews">
    <div style="border-bottom:2.778vw;"><nav-bar /></div>
    <div class="uploadfile">
      <van-uploader class="uploadimg" preview-size="100vw" :after-read="afterRead" />
      <edit-banner left="头像">
        <img :src="model.user_img" slot="right" alt="" v-if="model.user_img" />
        <img src="../assets/default_img.jpg" slot="right" alt="" v-else />
      </edit-banner>
    </div>
    <edit-banner left="昵称" @bannerClick="show = true">
      <a href="javascript:;" slot="right">{{ model.name }}</a>
    </edit-banner>
    <edit-banner left="账号">
      <a href="javascript:;" slot="right">{{ model.username }}</a>
    </edit-banner>
    <edit-banner left="性别" @bannerClick="genderShow = true">
      <a href="javascript:;" slot="right">{{ model.gender ? '男' : '女' }}</a>
    </edit-banner>
    <edit-banner left="个签" @bannerClick="textShow = true"></edit-banner>
    <div class="edit" @click="$router.back()">返回</div>
    <!-- 修改昵称弹出框 -->
    <van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmClick" @cancel="content = ''">
      <van-field v-model="content" autofocus />
    </van-dialog>
    <!-- 修改个签弹出框 -->
    <van-dialog v-model="textShow" title="个签" show-cancel-button @confirm="textClick" @cancel="content = ''">
      <van-field v-model="content" type="textarea" autofocus />
    </van-dialog>
    <!-- 修改性别 -->
    <van-action-sheet v-model="genderShow" :actions="actions" cancel-text="取消" @select="onSelect" />
  </div>
</template>

<script>
import NavBar from '../components/common/Navbar.vue'
import EditBanner from '../components/common/EditBanner.vue'
export default {
  data() {
    return {
      model: {},
      show: false,
      textShow: false,
      genderShow: false,
      content: '',
      actions: [
        { name: '男', val: 1 },
        { name: '女', val: 0 }
      ]
    }
  },
  components: {
    NavBar,
    EditBanner
  },
  methods: {
    async selectUser() {
      const res = await this.$http.get('/user/' + sessionStorage.getItem('id'))
      this.model = res.data[0]
      //   console.log(this.model)
    },
    async afterRead(file) {
      const fromData = new FormData()
      fromData.append('file', file.file)
      const res = await this.$http.post('/upload', fromData)
      this.model.user_img = res.data.url
      this.UserUpdate()
    },
    async UserUpdate() {
      const res = await this.$http.post('/update/' + sessionStorage.getItem('id'), this.model)
      if (res.data.code == 200) {
        this.$msg.fail('修改成功')
      }
    },
    confirmClick() {
      this.model.name = this.content
      this.UserUpdate()
      this.content = ''
    },
    textClick() {
      this.model.user_desc = this.content
      this.UserUpdate()
      this.content = ''
    },
    onSelect(data) {
      this.model.gender = data.val
      this.UserUpdate()
      this.genderShow = false
    }
  },
  created() {
    this.selectUser()
  }
}
</script>

<style lang="less" scoped>
.editViews {
  img {
    width: 12.778vw;
    height: 12.778vw;
    border-radius: 50%;
  }
  a {
    color: #333;
  }
}
.uploadfile {
  position: relative;
  overflow: hidden;
  .uploadimg {
    opacity: 0;
    position: absolute;
  }
}
.edit {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 18px;
  margin-top: 20px;
  padding: 5px;
}
</style>
